<template>
  <div>
    <el-table :data="records"
              border
              style="width: 100%">
      <el-table-column label="序号"
                       type="index"
                       align="center"
                       width="80">
      </el-table-column>
      <el-table-column prop="title"
                       label="标题">
      </el-table-column>
      <el-table-column prop="content"
                       :show-overflow-tooltip="true"
                       label="主体">
      </el-table-column>
      <el-table-column label="默认图片"
                       width="120">
        <template slot-scope="{row,$index}">
          <img :src="row.cover.split(',')[0]"
               style="width:100px;height:100px"></img>
        </template>
      </el-table-column>
      <el-table-column prop="viewed"
                       label="浏览数"
                       width="80">
      </el-table-column>
      <el-table-column prop="thumb"
                       label="点赞数"
                       width="80">
      </el-table-column>
      <el-table-column prop="prop"
                       width="width"
                       label="操作">
        <template slot-scope="{row,$index}">
          <el-button type="warning"
                     size="mini"
                     icon="el-icon-sort-up"
                     v-if="row.isSale==0"
                     @click="OnSale(row)"></el-button>
          <el-button type="warning"
                     size="mini"
                     icon="el-icon-sort-down"
                     v-else
                     @click="Cancel(row)"></el-button>
          <el-button type="primary"
                     size="mini"
                     icon="el-icon-edit"
                     @click="edit"></el-button>
          <el-button type="info"
                     size="mini"
                     icon="el-icon-info"
                     @click="ShowDrawer(row)"></el-button>
          <el-button type="danger"
                     size="mini"
                     icon="el-icon-delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="text-align:center"
                   @size-change="handleSizeChange"
                   @current-change="getPageList"
                   :current-page="page"
                   :page-sizes="[3,6,10]"
                   :page-size="limit"
                   layout="prev, pager, next, jumper,->, sizes,total"
                   :total="total">
    </el-pagination>
    <el-drawer direction="rtl"
               size="50%"
               :show-close=false
               :visible.sync="Show">
      <el-row :gutter="20">
        <el-col :span="6"
                style="text-align:right;font-weight:bold;">名称</el-col>
        <el-col :span="12">{{skuInfo.skuName}}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
                style="text-align:right;font-weight:bold;">描述</el-col>
        <el-col :span="12">{{skuInfo.skuDesc}}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
                style="text-align:right;font-weight:bold;">价格</el-col>
        <el-col :span="12">{{skuInfo.price}}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
                style="text-align:right;font-weight:bold;">平台属性</el-col>
        <el-col :span="12">
          <template>
            <el-tag type="success"
                    v-for="attr in skuInfo.skuAttrValueList"
                    :key="attr.Id">{{attr.attrId}}{{attr.attrName}}</el-tag>
          </template>
        </el-col>
      </el-row>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
                style="text-align:right;font-weight:bold;">商品图片</el-col>
        <el-col :span="12">
          <el-carousel>
            <el-carousel-item v-for="item in skuInfo.skuImageList"
                              :key="item.id">
              <img :src="item.imgUrl"
                   alt=""
                   style="width:356px">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "Sku",
  props: {

  },
  components: {

  },
  data () {
    return {
      // 当前页数
      page: 1,
      // 最大展示数目
      limit: 10,
      // Sku列表数据
      records: [],
      alllist: [],
      // Sku列表总数
      total: 0,
      // sku详情页数据
      skuInfo: {},
      // 展示抽屉
      Show: false
    };
  },
  computed: {

  },
  watch: {

  },
  created () {

  },
  mounted () {
    this.getSkuList()
  },
  methods: {
    // 获得Sku列表
    async getSkuList (pages = 1) {
      let { page, limit } = this
      page = pages
      let { data: result } = await this.$API.sku.reqAllArticleList('all')
      console.log('all', result);
      if (result) {
        this.total = result.length
        this.alllist = result
        this.getPageList()
      }

    },
    getPageList (pager=1) {
      this.page=pager
      let cnum = (this.page - 1) * this.records.length
      let lastpage = cnum + this.limit
      if (cnum + this.limit > this.total) lastpage = this.total
      console.log(cnum, lastpage);
      this.records = this.alllist.slice(cnum, lastpage)
    },
    // 每页展示数码改变时触发
    handleSizeChange (limit) {
      this.limit = limit
      this.getPageList()
      // let cnum = (this.page - 1) * this.records.length
      // this.records = this.alllist.slice(cnum, cnum + this.limit)

    },
    // 上架功能
    async OnSale (row) {
      const result = await this.$API.sku.reqOnSale(row.id)
      if (result.code == 200) {
        row.isSale = 1
        this.$message({
          type: "success",
          message: "上架成功"
        })
      }
    },
    // 下架功能
    async Cancel (row) {
      const result = await this.$API.sku.reqCancelSale(row.id)
      if (result.code == 200) {
        row.isSale = 0;
        this.$message({
          type: "success",
          message: "下架成功"
        })
      }
    },
    // 编辑按钮回调
    edit () {
      this.$message({
        type: "info",
        message: "正在开发中"
      })
    },
    // 详情页展示功能
    async ShowDrawer (sku) {
      this.Show = true
      const res = await this.$API.sku.reqSkuById(sku.id)
      console.log(res);
      if (res.code == 200) {
        this.skuInfo = res.data
      }
    }
  },
};
</script>
<style>
.el-carousel__item img {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
<style scoped>
.el-col {
  margin: 10px 10px;
}
>>> .el-carousel__button {
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}
</style>
